<template>
    <div class="white-search-bar">
        <input type="text" @keyup="appSearch" placeholder="防抖函数">
        <input type="text" @keyup="searchInputChage" placeholder="节流函数">
 </div>
</template>

<script>

import {debounce} from '../../utils/common.js'

export default {
  data () {
    return {
        timer: null
    }
  },
  methods: {
    test () {
      console.log('防抖');
    },
    appSearch:debounce(function(){
      this.test()
    },1000),
    test2 () {
      console.log('节流')
    },
    fnThrottle (method, delay, duration) {
      var that = this;
      var timer = this.timer;
      var begin = new Date().getTime();
      return function(){
        var context = that;
        var args = arguments;
        var current = new Date().getTime();
        clearTimeout(timer);
        if (current - begin >= duration) {
          method.apply(context,args);
          begin = current;
        }else{
          that.timer = setTimeout(() => {
            method.apply(context,args);
          },delay);
        }
      }
    },
    searchInputChage () {
      this.fnThrottle(this.test2, 1000, 1000)();
    }
  }, 
}
</script>

<style scoped>
</style>
